
import React from "react";
import { 
  User, 
  Settings, 
  Info, 
  LogOut, 
  ChevronRight, 
  UserCog,
  Bell,
  Shield,
  HelpCircle,
  MessageSquare
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

const My = () => {
  const navigate = useNavigate();
  const isLoggedIn = false; // This would be connected to your auth state

  const handleLogout = () => {
    // Implement actual logout logic here
    toast.success("退出登录成功");
    navigate("/login");
  };

  const menuItems = [
    {
      title: "个人信息",
      icon: <User className="h-5 w-5 text-primary" />,
      onClick: () => navigate("/profile"),
      showArrow: true,
    },
    {
      title: "消息通知",
      icon: <Bell className="h-5 w-5 text-blue-500" />,
      onClick: () => navigate("/notifications"),
      showArrow: true,
    },
    {
      title: "账号设置",
      icon: <UserCog className="h-5 w-5 text-green-500" />,
      onClick: () => navigate("/settings"),
      showArrow: true,
    },
    {
      title: "隐私政策",
      icon: <Shield className="h-5 w-5 text-purple-500" />,
      onClick: () => navigate("/privacy"),
      showArrow: true,
    },
    {
      title: "帮助中心",
      icon: <HelpCircle className="h-5 w-5 text-amber-500" />,
      onClick: () => navigate("/help"),
      showArrow: true,
    },
    {
      title: "联系我们",
      icon: <MessageSquare className="h-5 w-5 text-teal-500" />,
      onClick: () => navigate("/contact"),
      showArrow: true,
    },
    {
      title: "关于鹰朗健康",
      icon: <Info className="h-5 w-5 text-gray-500" />,
      onClick: () => navigate("/about"),
      showArrow: true,
    },
  ];

  return (
    <div className="container max-w-md mx-auto px-4 py-8">
      <div className="space-y-6">
        {/* User Profile Section */}
        <Card className="p-6">
          <div className="flex items-center space-x-4">
            <Avatar className="h-16 w-16 border-2 border-primary">
              <AvatarImage src="/placeholder.svg" alt="User" />
              <AvatarFallback>用户</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              {isLoggedIn ? (
                <>
                  <h2 className="text-xl font-bold">用户名</h2>
                  <p className="text-muted-foreground">user@example.com</p>
                </>
              ) : (
                <div className="space-y-2">
                  <h2 className="text-xl font-bold">未登录</h2>
                  <Button 
                    onClick={() => navigate("/login")} 
                    variant="outline" 
                    className="text-primary border-primary hover:bg-primary/10"
                  >
                    点击登录
                  </Button>
                </div>
              )}
            </div>
          </div>
        </Card>

        {/* Menu Items */}
        <Card>
          <div className="divide-y">
            {menuItems.map((item, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/50"
                onClick={item.onClick}
              >
                <div className="flex items-center space-x-3">
                  {item.icon}
                  <span>{item.title}</span>
                </div>
                {item.showArrow && <ChevronRight className="h-5 w-5 text-muted-foreground" />}
              </div>
            ))}
          </div>
        </Card>

        {/* Logout Button (only show if logged in) */}
        {isLoggedIn && (
          <Button
            variant="outline"
            className="w-full border-destructive text-destructive hover:bg-destructive/10"
            onClick={handleLogout}
          >
            <LogOut className="mr-2 h-4 w-4" />
            退出登录
          </Button>
        )}

        {/* Version Info */}
        <div className="text-center text-xs text-muted-foreground">
          <p>鹰朗健康 v1.0.0</p>
          <p className="mt-1">© 2024 鹰朗健康. 保留所有权利</p>
        </div>
      </div>
    </div>
  );
};

export default My;
